import React from 'react';
import style from './style.styl';
import cx from 'classnames';

class Component extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object
  }
  constructor(props) {
    super(props);
    this.displayName = 'Component';
  }
  tabRouter = (index) => {
    this.context.router.push({
      ...this.props.url,
      query: {
        ...this.props.url.query || {},
        step: index,
      }
    });
  }
  renderNav = (list) => {
    const {
      step,
    } = this.props;
    return (
      <div className={style['nav']}>
        {
          list.map((v, i) => {
            const type = step - 1 > i ? 'done' : 
              step - 1 === i ? 'doing' : 'todo';
            return (
              <div 
                key={i}
                className={cx({
                  [style['nav-item']]: true,
                  [style[type]]: true,
                })}
                onClick={()=>{type==='done' && this.tabRouter(i + 1)}}
              >
                <div className={style['nav-num']}>{i+1}.</div>{v}
              </div>
            )
          })
        }
      </div>
    );
  }
  render() {
    const {
      children,
      step,
    } = this.props;
    const titleList = [];
    const items = React.Children.map(this.props.children, (child, i) => {
      const {
        title
      } = child.props;
      titleList.push(title);
      return React.cloneElement(child,{
        isShow: step - 1 === i,
        tabRouter: this.tabRouter,
      });
    });
    return (
      <div>
        <div className={style['main']}>
          <div className={style['title']}>{titleList[step-1]}</div>
          {items}
        </div>
        {this.renderNav(titleList)}
      </div>
    );
  }
}

export default Component;

export StepItem from './StepItem';

